<template>
  <div v-if="selectList.length > 0" class="day-inspection">
    <div class="content-item-tittle">日常巡检</div>
    <el-row type="flex" justify="space-between">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-select filterable @change="getData(1)" v-model="formInline.fireTTypes" placeholder="请选择巡检路线">
            <el-option v-for="item in selectList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="day-inspection-content">
      <div class="day-inspection-item">
        <div class="item-content-tittle">当前巡检完成度</div>
        <div class="day-inspection-item-echarts" id="not-incomplete"></div>
        <div class="day-inspection-item-echarts" id="qualified-points"></div>
        <div class="day-inspection-item-echarts" id="not-qualified-points"></div>
        <div class="day-inspection-item-time">
          <div class="day-inspection-item-content" style="width: 280px;">
            任务时间段
            <span class="color-content">{{ inspectTime }}</span>
          </div>
          <div class="day-inspection-item-content" style="width: 160px;">
            首检时间
            <span class="color-content">{{ firstInspection }}</span>
          </div>
          <div class="day-inspection-item-content inspect-acount-names-wrap" style="width: 150px;">
            巡检员
            <div class="color-content inspect-acount-names">
              <p>{{ inspectAcountNames }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="day-inspection-item" style="position: relative;">
        <div class="item-content-tittle">历史巡检完成度</div>
        <div class="selection-cycle">
          <span @click="getChangeData(1)" :class="{ active: distributionDateType === 1 }">周</span>
          <span @click="getChangeData(2)" :class="{ active: distributionDateType === 2 }">月</span>
        </div>
        <div class="bar-inspection-Echarts" id="barInspectEcharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectInspectTaskList,
  getInspectTaskDetail,
  getInspectTrend,
} from '@/api/home'
export default {
  name: 'DayInspection',
  props: {
    organizationId: {
      default() {
        return undefined
      },
    },
  },
  data() {
    return {
      distributionDateType: 1,
      data: [
        {
          date: '05/01',
          percent: 10,
        },
        {
          date: '05/02',
          percent: 20,
        },
        {
          date: '05/03',
          percent: 30,
        },
        {
          date: '05/04',
          percent: 40,
        },
        {
          date: '05/05',
          percent: 50,
        },
        {
          date: '05/06',
          percent: 60,
        },
        {
          date: '05/07',
          percent: 70,
        },
      ],
      formInline: {
        fireTTypes: '',
        time: '',
      },
      selectList: [], //巡检路线列表
      InspectTaskList: [], //历史巡检完成度
      InspectTaskDetail: [], //巡检任务详情
      inspectTime: '', //巡检时间段
      inspectAcountNames: '', //巡检员
      firstInspection: '',
    }
  },
  created() {
    let that = this
    that.getOptionsData()
  },
  methods: {
    // 更新/刷新模块
    refreshModel() {
      this.getOptionsData()
    },
    // 获取下拉框数据
    getOptionsData() {
      let that = this
      selectInspectTaskList({
        orgId: this.organizationId || this.$store.state.userinfo.org.id,
      }).then((res) => {
        if (res.status === 200) {
          that.selectList = res.data
          if (res.data.length !== 0) {
            // 默认选择第一个
            that.formInline.fireTTypes = res.data[0].id
            that.getData()
          }
        }
      })
    },
    // 获取当前和历史巡检完成度
    getData() {
      let that = this

      that.getChangeData(1)

      getInspectTaskDetail({
        taskId: that.formInline.fireTTypes || '',
      }).then((res) => {
        if (res.status === 200) {
          that.InspectTaskDetail = res.data
          that.firstInspection = (res.data.firstExamineTime || '').substring(
            5,
            16
          )
          that.inspectAcountNames = res.data.firstExamineName || ''
          that.InspectTaskDetail.startTime = that.InspectTaskDetail.startTime
            .substring(5, 16)
            .replace('-', '/')
          that.inspectTime =
            that.InspectTaskDetail.startTime +
            ' - ' +
            that.InspectTaskDetail.endTime.substring(5, 16).replace('-', '/')
          that.$nextTick(() => {
            const num1 = (
              that.InspectTaskDetail.unfinishedPointNum /
              (that.InspectTaskDetail.unfinishedPointNum +
                that.InspectTaskDetail.finishedPointNum)
            ).toFixed(2)
            const num2 = (
              that.InspectTaskDetail.qualifiedPointNum /
              (that.InspectTaskDetail.qualifiedPointNum +
                that.InspectTaskDetail.unQualifiedPointNum)
            ).toFixed(2)
            const num3 = 1 - num2

            this.initEcharts(
              'not-incomplete',
              '#4CA4FE',
              that.InspectTaskDetail.unfinishedPointNum,
              that.InspectTaskDetail.finishedPointNum,
              '未完成点数',
              num1
            )
            this.initEcharts(
              'qualified-points',
              '#47CFAD',
              that.InspectTaskDetail.qualifiedPointNum,
              that.InspectTaskDetail.unQualifiedPointNum,
              '巡检合格点位',
              num2
            )
            this.initEcharts(
              'not-qualified-points',
              '#FD5E5E',
              that.InspectTaskDetail.unQualifiedPointNum,
              that.InspectTaskDetail.qualifiedPointNum,
              '巡检不合格点位',
              num3
            )
          })
        }
      })
    },
    getChangeData(type) {
      let that = this
      that.distributionDateType = type
      getInspectTrend({
        taskId: that.formInline.fireTTypes || '',
        timeType: that.distributionDateType,
      }).then((res) => {
        if (res.status === 200) {
          that.InspectTaskList = res.data
          that.$nextTick(() => {
            that.initBarEcharts()
          })
        }
      })
    },
    initEcharts(id, color, notDownData, downData, titleText, num) {
      let that = this
      let option = {
        // tooltip: {
        //   show: true,
        //   position: ["5%", "78%"],
        //   formatter: "{b} : {c}"
        // },
        title: {
          text: titleText + ' ' + notDownData,
          left: '45%',
          top: '80%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: color,
            textAlign: 'center',
          },
        },
        series: [
          {
            name: '未完成点数',
            type: 'pie',
            clockWise: false,
            radius: [60, 70],
            itemStyle: {
              normal: {
                color: color,
                shadowColor: color,
                shadowBlur: 0,
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            hoverAnimation: false,
            center: ['50%', '40%'],
            data: [
              {
                value: num * 100 || 0,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value.toFixed(2) + '%'
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '24',
                      fontWeight: 'bold',
                      color: '#5F6884',
                    },
                  },
                },
              },
              {
                value: notDownData === 0 ? 1 : downData, // 防止echarts自动从中间分隔圆环
                name: 'invisible',
                itemStyle: {
                  normal: {
                    color: '#F1F1F1',
                  },
                  emphasis: {
                    color: '#F1F1F1',
                  },
                },
              },
            ],
          },
        ],
      }
      this.$echarts.init(document.getElementById(id)).setOption(option)
    },
    initBarEcharts() {
      let that = this
      let dataXAxis = [],
        dataYAxis = [],
        dataOutBg = []
      that.InspectTaskList.forEach((item) => {
        dataXAxis.push(item.date.substring(5, 10))
        dataYAxis.push(item.percent)
        dataOutBg.push(100)
      })
      let option = {
        grid: {
          top: '10%',
          left: '-5%',
          right: '3%',
          bottom: '15%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}：{c}%',
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          data: dataXAxis,
          axisLabel: {
            fontSize: 16,
            inside: false,
            textStyle: {
              color: '#8890AB',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          show: false,
          splitNumber: 2,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 16,
            formatter: function (value) {
              return value + '%'
            },
            textStyle: {
              color: '#fff',
            },
          },
        },
        series: [
          {
            name: '数据内框',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 2,
                color: '#47CFAD',
              },
            },
            z: 10,
            data: dataYAxis,
          },
          {
            name: '外框',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: '#F1F1F1',
              },
            },
            silent: true,
            barGap: '-100%', // Make series be ove
            data: dataOutBg,
          },
        ],
      }
      this.$echarts
        .init(document.getElementById('barInspectEcharts'))
        .setOption(option)
    },
  },
}
</script>
<style lang="scss">
.day-inspection {
  height: 400px;
  .el-row--flex.is-justify-space-between {
    float: right;
    margin-top: -32px;
  }
  .day-inspection-content {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 51px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .day-inspection-item {
      border: 1px solid #e1e1e1;
      float: left;
      width: calc(50% - 6px);
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      .selection-cycle {
        position: absolute;
        margin-top: 30px;
        z-index: 1;
        right: 10px;
        display: flex;
        justify-content: space-between;
        span {
          padding: 0px 16px;
          width: 50px;
          line-height: 34px;
          font-size: 16px;
          border: 1px solid #f1f1f1;
          color: #8890ab;
          cursor: pointer;
        }
        .active {
          background-color: #3b60d9;
          color: #ffffff;
        }
      }
      .bar-inspection-Echarts {
        height: calc(100% - 61px);
        width: 100%;
      }
      .day-inspection-item-echarts {
        float: left;
        width: 30%;
        height: calc(100% - 125px);
      }
      .day-inspection-item-tittle {
        padding: 10px;
        width: 100%;
        height: 10%;
        font-size: 20px;
        font-family: PingFang SC Regular, PingFang SC Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #8890ab;
      }
      .day-inspection-item-time {
        // float: left;
        width: 100%;
        height: 64px;
        line-height: 64px;
        background: #e5ebff;
        .day-inspection-item-content {
          float: left;
          text-align: center;
          color: #8890ab;
          font-size: 14px;
          .color-content {
            color: black;
          }
        }
        .inspect-acount-names-wrap {
          display: flex;
          padding-left: 5px;
          .inspect-acount-names {
            margin-left: 5px;
            width: 95px;
            height: 60px;
            overflow: hidden;
            text-align: left;
            p {
              width: max-content;
              animation: 6s wordsLoop linear infinite normal;
            }
            &:hover {
              p {
                animation-play-state: paused;
              }
            }
          }
        }
      }
    }
  }
}
</style>
